<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>3_虚拟DOM与真实DOM</title>
</head>

<body>
	<!-- 1.准备容器 -->
	<div id="app"></div>
	<div id="demo"></div>

	<!-- 2.引入react核心库 -->
	<script src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作Dom -->
	<script src="../js/react-dom.development.js"></script>
	<!-- 引入babel,将jsx转化为js -->
	<script src="../js/babel.min.js"></script>


	<!-- 3.此次一定要写babel,写的就是jsx代码(通过babel自动转化为js代码) -->
	<script type="text/babel">
		//3.1创建虚拟DOM(不是字符串不加引号)
		const VDOM = (
			<h1 id="title">
				<span>hello,react</span>
			</h1>
		)
		const TDOM = document.querySelector('#demo')
		//3.2渲染虚拟DOM到页面成为真实DOM
		ReactDOM.render(VDOM, document.querySelector('#app'))

		console.log('虚拟dom', VDOM);
		console.log('真实dom', TDOM);
		debugger;
		// console.log(typeof VDOM);
		// console.log(VDOM instanceof Object);
		/*
			关于虚拟DOM与真实DOM
				1.本质上是一个object类型的对象
				2.虚拟DOM比'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,不需要真实DOM上那么多属性和API
				3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上
		*/
	</script>
</body>

</html>